<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./imgNew13.css" />
    <script src="../js/jquery-1.12.4.js"></script>
    <title>轮播图</title>
    <style>
      body {
      }

      /*  宽高传进  buildImgNews13 里面*/
      .parentbox {
        /* width: 1070px;
        height: 340px; */
        position: relative;
        overflow: hidden;
      }
      .slide-item {
        /* width: 420px;
        height: 290px; */
      }
      .parentbox1 {
      }
    </style>
  </head>

  <body>
    <!-- 轮播图父元素。由平台提供 -->
    <div class="parentbox parentbox1">
      <!-- 使用下面的dom -->
      <div class="newimg13-container">
        <div class="slide-item">
          <img src="./articleImg/image1.jpg" alt="Slide 1" />
          <div class="header">Caption 1</div>
        </div>
        <div class="slide-item">
          <img src="./articleImg/image2.jpg" alt="Slide 2" />
          <div class="header">Caption 2</div>
        </div>
        <div class="slide-item">
          <img src="./articleImg/image3.jpg" alt="Slide 3" />
          <div class="header">Caption 3</div>
        </div>
      </div>
      <a class="prev arrow" data-arrow="-1">&#10094;</a>
      <a class="next arrow" data-arrow="1">&#10095;</a>
      <div class="dots-container">
        <span class="dot-item" data-slide="1">1</span>
        <span class="dot-item" data-slide="2">2</span>
        <span class="dot-item" data-slide="3">3</span>
      </div>
    </div>

    <div class="parentbox parentbox3">
      <!-- 使用下面的dom -->
    </div>

    <script src="./imgNew13.js"></script>
    <script>
      //  模拟生成文章列表
      var articleList = []
      for (var i = 0; i < 5; i++) {
        var o = {
          header: '标题' + (i + 1),
          author: '作者' + (i + 1),
          aritcleImg: './articleImg/image' + (i + 1) + '.jpg'
        }
        articleList.push(o)
      }

      function buildImgNews13(articleList) {
        var imgNews = '<div class="newimg13-container">'
        var arrows = '\n           <a class="prev arrow" data-arrow="-1">&#10094;</a>\n      <a class="next arrow" data-arrow="1">&#10095;</a>\n          '
        var dots = '<div class="dots-container">'
        for (var i = 0; i < articleList.length; i++) {
          var articleItem = articleList[i]
          imgNews += '\n          <div class="slide-item">\n          <img src="' + articleItem.aritcleImg + '" alt="" />\n          <div class="header">' + articleItem.header + '</div>\n        </div>\n         '
          dots += '<span class="dot-item" data-slide="' + i + '">' + (i + 1) + '</span>'
        }
        imgNews += '</div>'
        dots += '</div>'
        $('.parentbox3').append(imgNews)
        $('.parentbox3').append(arrows)
        $('.parentbox3').append(dots)
        newImg13(
          'parentbox3',
          {
            w: 1070,
            h: 340
          },
          {
            w: 420,
            h: 290
          },
          {}
        )
      }
      newImg13('parentbox1', { w: 1070, h: 340 }, { w: 420, h: 290 }, {})
      $(document).ready(function () {
        // 在这里写你的代码...
        buildImgNews13(articleList)
      })
    </script>
  </body>
</html>
